<template>
  <div>
    <h3>发布需求</h3>
    <br><br><br>
    <div class="need">
        <van-field v-model="title" label="标题" />
        <van-field v-model="describe" label="描述" type="textarea" />
        <van-uploader :after-read="afterRead" >
        <div class="uploader">
            上传文件
        </div>
    </van-uploader>
    <van-field
     v-model="fieldValue"
     is-link
     readonly
     label="类型"
     placeholder="请选择需求类型"
     @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
     <van-cascader
       v-model="cascaderValue"
       title="请选择所在类型"
       :options="options"
       @close="show = false"
       @finish="onFinish"
       :field-names="fieldNames"
     />
    </van-popup>
    <br><br>
    <div><button @click="way_type=1">招标</button>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click="way_type=2">比稿</button></div>
    <br><br>
    <!-- {{money}} {{money_max}} -->
    <div class='divh'>
        <div class="mondiv1" @click="monstatus">{{money_scope}}</div>
        <div class="mondiv2" v-if="money_status==1"><input type="number" size="small" class="input1" v-model="money"></div>
        <div class="mondiv2" v-if="money_status==2"><input type="number" size="small" class="input1" v-model="money"> &emsp;—&emsp; <input type="number" size="small" class="input1" v-model="money_max"> </div>
    </div>
    </div>
    <br><br><br>
    <button @click="determine">确定</button>

    
  </div>
</template>

<script>
import {get,post} from '../utils/request'

export default {
  data(){
    return{
        lis:[],
        show: false,
        fieldValue: '',
        cascaderValue: '',
        // 选项列表，children 代表子选项，支持多级嵌套
        options: [],
        fieldNames: {
        text: 'name',
        value: 'id',
        children: 'son',
        },
        cid:0,
        title:'',
        describe:'',
        afterRead(file) {
        // 此时可以自行将文件上传至服务器
        console.log(file);
        },
        money:0,
        money_max:0,
        money_status:1,
        money_scope:'有明确预算',
        way_type:1
    }
  },
  methods:{
    classify(){
        get('http://127.0.0.1:8000/user/classify/')
        .then(resp=>{
           if(resp.data.code==200){
            this.options=resp.data.data
           }
        })
    },
    onFinish({ selectedOptions,value }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.name).join('/');
      this.cid=value
    },
    monstatus(){
        if (this.money_status==1){
            this.money_scope='有大致范围'
            this.money_status=2
        }else{
            this.money_scope='有明确预算'
            this.money_status=1
        }
    },
    determine(){
        post('http://127.0.0.1:8000/user/projectdemand/',{'title':this.title,'describe':this.describe,'cid':this.cid,'money':this.money,'money_max':this.money_max,'way_type':this.way_type,'userid':localStorage.getItem('userid')})
      .then(resp=>{
        if (resp.data.code == 200){
            alert(resp.data.msg)
          //成功跳转到首页
        //   this.$router.push('/user')
        }else{
          alert(resp.data.msg)
        }
      }).catch(err=>{
        console.log(err)
      })
    }
  },
  mounted(){
    this.classify();
  }

}
</script>

<style>
.need{
    margin: auto;
    width: 500px;
}
.uploader{
    width: 480px;
    height: 40px;
    background-color: rgb(243, 243, 243);
    padding-top: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.mondiv1{
    width: 120px;
    height: 40px;
    background-color: rgb(255, 236, 202);
    text-align: center;
    line-height: 40px;
}
.mondiv2{
    width: 380px;
    line-height: 30px;
}
.divh{
    display: flex;
    /* justify-content: space-between; */
}
.input1{
    width: 30%;
}
</style>